<template>
    <div>
        <el-header height="40px">
            <!-- 顶部 -->
            <div class="head">
                <!-- <span v-if="isCollapse" style="color: #9932CC; width: auto;">&nbsp;Apr.</span> -->
                <span v-if="isCollapse"><img src="../assets/logo.jpg" alt=""
                        style="width: 40px; height: 38px; position: relative;right: 5px;"></span>
                <span v-else style="color: rgb(64, 158, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apresunday</span>
                <!-- <span v-else style="color: #9932CC;"><img src="../assets/logo.jpg" alt=""
                        style="width: 40px; height: 38px;margin-left: 45px;"></span> -->

                <el-icon v-if="isCollapse" class="el-icon-s-unfold"
                    style="position: absolute;left: 80px; font-size: 25px; color: gray;" @click="fn">
                    <Expand />
                </el-icon>
                <el-icon v-else class="el-icon-s-fold"
                    style="position: absolute;left: 190px; font-size: 25px; color: gray;" @click="fn">
                    <Fold />
                </el-icon>
                <!-- 搜索 -->
                <el-icon style="position: absolute;left: 280px; font-size: 25px; color: gray;">
                    <Search />
                </el-icon>
                <el-input v-model="empDataStore.ruleForm.position" placeholder="请输入要搜索的岗位"
                    style="width: 300px;position: absolute;left: 310px;top:17px" @keyup.enter="searchFn()" />
                <el-button type="primary" style="position: absolute;left: 615px;top:17px"
                    @click="searchFn()">搜索</el-button>
                <div v-if="!userInfo.id" style="float: right; margin-right: 2%;"><a href="#/login">登录</a></div>
                <div v-else style="float: right; margin-right: 2%;">用户：{{ userInfo.userName }} <a href=""
                        @click="logout">退出</a></div>
            </div>
        </el-header>
        <el-container class="outside-container">
            <!--侧边栏-->
            <!-- 根据展开收缩状态设置侧边栏宽度 -->
            <el-aside :style="{ width: isCollapse ? '58px' : '200px' }"> <el-menu default-active="1-4-1"
                    class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                    <el-menu-item index="1">
                        <el-icon><router-link to="/search">
                                <Search />
                            </router-link>
                        </el-icon>
                        <span slot="title"><router-link to="/search">&nbsp;&nbsp;岗位搜索</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <el-icon>
                            <router-link to="/analysis">
                                <PieChart />
                            </router-link>
                        </el-icon>
                        <span slot="title"><router-link to="/analysis">&nbsp;&nbsp;岗位分析</router-link></span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon>
                            <router-link to="/autoScript">
                                <PieChart />
                            </router-link>
                        </el-icon>
                        <span slot="title"><router-link to="/autoScript">&nbsp;&nbsp;自动爬取</router-link></span>
                    </el-menu-item>
                    <!-- <el-menu-item index="3">
                        <el-icon>
                            <router-link to="/script">
                                <PieChart />
                            </router-link>
                        </el-icon>
                        <span slot="title"><router-link to="/script">&nbsp;&nbsp;数据爬取</router-link></span>
                    </el-menu-item> -->
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <!-- 底部版权声明 -->
                <!-- <el-footer>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <p>版权所有 &copy; 大数据就业分析. 保留所有权利。</p>
                            </div>
                            <div class="col-md-6">
                                <p>ICP备案号：粤ICP备2024173010号-1</p>
                                <p><a href="http://www.miitbeian.gov.cn/" target="_blank">点击这里查看备案信息</a></p>
                            </div>
                        </div>
                    </div>
                </el-footer> -->
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useEmpDataStore } from '../stores/empDataStore';
import { useRouter } from 'vue-router'
import cookie from "js-cookie";
const router = useRouter()
const empDataStore = useEmpDataStore()
const userInfo = ref({})
const searchFn = async () => {
    // 重置页码和条数
    empDataStore.currentPage = 1
    empDataStore.pageSize = 10
    empDataStore.pageInfo.current = 1
    empDataStore.pageInfo.size = 10
    console.log("log:", empDataStore.ruleForm.position)
    // 跳转搜索页
    router.push('/search')
    await empDataStore.getPageList()
}

// 搜索框

// 侧边栏开关状态
const isCollapse = ref(false)
const fn = () => {
    isCollapse.value = !isCollapse.value
}
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const getUserInfo = async () => {
    const res = cookie.get("analysis_user")
    if (res) {
        userInfo.value = JSON.parse(res)
    }
    console.log("res:", res)
    console.log("userinfo:", userInfo.value)
}

const logout = async () => {
    // cookie.set("analysis_token", "", { domain: '.apresunday.online' })
    cookie.set("analysis_token", "", { domain: 'localhost' })
    // cookie.set("analysis_user", "", { domain: '.apresunday.online' })
    cookie.set("analysis_user", "", { domain: 'localhost' })
}

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped>
/* 设置Main部分高度自适应 */
.outside-container {
    height: 90vh;
}

/* 侧边栏默认样式 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
    /* 侧边栏展开后宽度 */
    width: 170px;
    min-height: 400px;
}

/* 强制减少侧边栏宽度限制 */
.el-menu-item {
    min-width: 20px !important;
    /* padding-left: 40px!important; */
}


.el-header {
    border-bottom: 1px solid #e6e6e6;
    margin-top: 20px;
}

.router-link-active {
    text-decoration: none;
    color: #409eff;
}

a {
    text-decoration: none;
    color: grey;
}
</style>